<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
  <title>Catbook</title>
  <style>
    /*menu*/
    /* @font-face {
      font-family: 'Open Sans';
      font-style: normal;
      font-weight: 300;
      font-stretch: normal;
      src: url(https://fonts.gstatic.com/s/opensans/v27/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4gaVc.ttf) format('truetype');
    }

    @font-face {
      font-family: 'Pacifico';
      font-style: normal;
      font-weight: 400;
      src: url(https://fonts.gstatic.com/s/pacifico/v17/FwZY7-Qmy14u9lezJ-6H6Mw.ttf) format('truetype');
    } */

    .flex-center {
      display: flex;
      align-items: center;
      justify-content: center;
    }
/* 
    * {
      box-sizing: border-box;
      font-family: 'Open Sans', sans-serif;
      font-weight: 300;
    } */

    a,
    a:visited,
    a:hover,
    a:active {
      color: inherit;
      text-decoration: none;
    }
/* 
    h1 {
      font-family: 'Pacifico', cursive;
      font-weight: 400;
      font-size: 3em;
      text-align: center;
    } */

    .outer-menu {
      position: fixed;
      top: 15vh;
      /* top: 0; */
      left: 0;
      z-index: 1;

    }

    .outer-menu .checkbox-toggle {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      cursor: pointer;
      width: 60px;
      height: 60px;
      opacity: 0;
    }

    .outer-menu .checkbox-toggle:checked+.hamburger>div {
      transform: rotate(135deg);
    }

    .outer-menu .checkbox-toggle:checked+.hamburger>div:before,
    .outer-menu .checkbox-toggle:checked+.hamburger>div:after {
      top: 0;
      transform: rotate(90deg);
    }

    .outer-menu .checkbox-toggle:checked+.hamburger>div:after {
      opacity: 0;
    }

    .outer-menu .checkbox-toggle:checked~.menu {
      pointer-events: auto;
      visibility: visible;
    }

    .outer-menu .checkbox-toggle:checked~.menu>div {
      transform: scale(1);
      transition-duration: 0.75s;
    }

    .outer-menu .checkbox-toggle:checked~.menu>div>div {
      opacity: 1;
      transition: opacity 0.4s ease 0.4s;
    }

    .outer-menu .checkbox-toggle:hover+.hamburger {
      box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .outer-menu .checkbox-toggle:checked:hover+.hamburger>div {
      transform: rotate(225deg);
    }

    .outer-menu .hamburger {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 60px;
      height: 60px;
      padding: 0.5em 1em;
      background: #3498DB;
      border-radius: 0 0.12em 0.12em 0;
      cursor: pointer;
      transition: box-shadow 0.4s ease;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .outer-menu .hamburger>div {
      position: relative;
      flex: none;
      width: 100%;
      height: 2px;
      background: #FEFEFE;
      transition: all 0.4s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .outer-menu .hamburger>div:before,
    .outer-menu .hamburger>div:after {
      content: '';
      position: absolute;
      z-index: 1;
      top: -10px;
      left: 0;
      width: 100%;
      height: 2px;
      background: inherit;
      transition: all 0.4s ease;
    }

    .outer-menu .hamburger>div:after {
      top: 10px;
    }

    .outer-menu .menu {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      visibility: hidden;
      overflow: hidden;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      outline: 1px solid transparent;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .outer-menu .menu>div {
      width: 200vw;
      height: 200vw;
      color: #FEFEFE;
      background: #3498DB;
      border-radius: 50%;
      transition: all 0.4s ease;
      flex: none;
      transform: scale(0);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .outer-menu .menu>div>div {
      text-align: center;
      max-width: 90vw;
      max-height: 100vh;
      opacity: 0;
      transition: opacity 0.4s ease;
      overflow-y: auto;
      flex: none;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .outer-menu .menu>div>div>ul {
      list-style: none;
      padding: 0 1em;
      margin: 0;
      display: block;
      max-height: 100vh;
    }

    .outer-menu .menu>div>div>ul>li {
      padding: 0;
      margin: 1em;
      font-size: 24px;
      display: block;
    }

    .outer-menu .menu>div>div>ul>li>a {
      position: relative;
      display: inline;
      cursor: pointer;
      transition: color 0.4s ease;
    }

    .outer-menu .menu>div>div>ul>li>a:hover {
      color: #e5e5e5;
    }

    .outer-menu .menu>div>div>ul>li>a:hover:after {
      width: 100%;
    }

    .outer-menu .menu>div>div>ul>li>a:after {
      content: '';
      position: absolute;
      z-index: 1;
      bottom: -0.15em;
      left: 0;
      width: 0;
      height: 2px;
      background: #e5e5e5;
      transition: width 0.4s ease;
    }

    .outer-menu {
      z-index: 999;
    }


    * {
      box-sizing: border-box;
    }

    *:focus {
      outline: none;
    }

    body {
      font-family: Arial;
      background-color: #3498DB;
      padding: 50px;
    }

    .login {
      margin: 20px auto;
      width: 90%;
    }

    .login-screen {
      background-color: #FFF;
      padding: 60px;
      padding-top: 20px;
      border-radius: 20px
    }

    .app-title {
      /* text-align: center; */
      color: #777;
    }

    .app-title h1 {
      font-size: 50px;
    }

    /* .login-form {
      text-align: center;
    } */

    .control-group {
      margin-bottom: 10px;
    }

    input {
      /* text-align: center; */
      background-color: #ECF0F1;
      border: 2px solid transparent;
      border-radius: 3px;
      font-size: 16px;
      font-weight: 200;
      padding: 10px 0;
      width: 60%;
      transition: border .5s;
    }

    input:focus {
      border: 2px solid #3498DB;
      box-shadow: none;
    }

    .btn {
      border: 2px solid transparent;
      background: #3498DB;
      color: #ffffff;
      font-size: 16px;
      line-height: 25px;
      padding: 10px 0;
      text-decoration: none;
      text-shadow: none;
      border-radius: 3px;
      box-shadow: none;
      transition: 0.25s;
      display: block;
      width: 250px;
      /* margin: 0 auto; */
    }

    .btn:hover {
      background-color: #2980B9;
    }

    .login-link {
      font-size: 12px;
      color: rgb(163, 159, 159);
      display: block;
      margin-top: 12px;
      text-decoration: none;
    }

    .login-link:hover {
      color: rgb(0, 0, 0);
      transition: .5s;
    }


#myIframe{
  display: none;
}
    

    
  </style>
</head>

<body>
  <div class="outer-menu">
    <input class="checkbox-toggle" type="checkbox" />
    <div class="hamburger">
      <div></div>
    </div>
    <div class="menu">
      <div>
        <div>
          <ul>
            <li><a href="/home.html">首页</a></li>
            <li><a href="/upload.html">上传</a></li>
            <li><a href="/login.html">登录</a></li>
            <li><a href="/regis.html">注册</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="outer-menu">
    <input class="checkbox-toggle" type="checkbox" />
    <div class="hamburger">
      <div></div>
    </div>
    <div class="menu">
      <div>
        <div>
          <ul>
            <li><a href="/home.html">首页</a></li>
            <li><a href="/upload.html">上传</a></li>
            <li><a href="/login.html">登录</a></li>
            <li><a href="/regis.html">注册</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="login">
    <div class="login-screen">
      <div class="app-title">
        <h1>猫猫信息修改</h1>
      </div>
      <div class="login-form">
        <div class="control-group">
          <input type="text" class="login-field" name="catname" value="" placeholder="猫猫名字" id="name" />
        </div>
        <div class="control-group">
          <input type="text" class="login-field" name="color" value="" placeholder="毛色" id="color" />
        </div>
        <div class="control-group">
          <input type="text" class="login-field" name="breed" value="" placeholder="品种" id="breed" />
        </div>
        <div class="login-form">
          <div class="control-group">
            <input type="text" class="login-field" name="place" value="" placeholder="生活区域" id="place" />
          </div>
          <div class="control-group">
            <input type="text" class="login-field" name="specific" value="" placeholder="具体拍摄地点" id="specific" />
          </div>
          <input type="submit" class="btn btn-primary btn-large btn-block" value="更新" id="uploadbtn" />
          <Iframe id="myIframe" name="myIframe"></Iframe>
        </div>
      </div>
    </div>
    <script src="./js/axios.min.js"></script>
    <script>
      function cansub() {
        return false;
      }
    </script>
    <script>
      window.onload = function(){
        var update_cat_name = window.localStorage.getItem("update_cat_name");
        var update_breed = window.localStorage.getItem("update_breed");
        var update_color = window.localStorage.getItem("update_color");
        var update_place = window.localStorage.getItem("update_place");
        var update_specific = window.localStorage.getItem("update_specific");
        if(update_cat_name != "undefined")document.getElementById('name').value = update_cat_name;
        if(update_breed != "undefined")document.getElementById('color').value = update_breed;
        if(update_color != "undefined")document.getElementById('breed').value = update_color;
        if(update_place != "undefined")document.getElementById('place').value = update_place;
        if(update_specific != "undefined")document.getElementById('specific').value = update_specific;
      }
      uploadbtn.onclick = function () {
        var nameval = window.localStorage.getItem("update_cat_name");
        var new_nameval = document.getElementById("name").value;
        var new_colorval = document.getElementById("color").value;
        var new_breedval = document.getElementById("breed").value;
        var new_placeval = document.getElementById("place").value;
        var new_specificval = document.getElementById("specific").value;
        var token = window.localStorage.getItem("token");

        console.log(nameval)
        axios.post("http://120.77.221.202:1016/posts/update", {
          name: nameval,
          new_name: new_nameval,
          new_color: new_colorval,
          new_breed: new_breedval,
          new_place: new_placeval,
          new_specific: new_specificval,
        }, {
          headers: {
            authorization: `Bearer ${token}`
          },
        })
          .then(function (response) {
            console.log(response.data);
            //alert(response.data.msg);
            window.location.href = "./home.html";
          })
          .catch(function (error) {
            console.log(error.response.data.msg);
            alert(error.response.data.msg);
          });
      };
    </script>
</body>

</html>